<template>
    <div class="dataApply">
        <h2 class="t-color">数据需求申请</h2>
        <div class="">
            <div class="dataAssetDetaol-title">分区字段信息</div>
            <el-table height="300px" :data="tableData" border style="width: 100%">
                <el-table-column align="center" prop="date" label="表中文名">
                </el-table-column>
                <el-table-column align="center" prop="name" label="表英文名">
                </el-table-column>
                <el-table-column align="center" prop="name" label="是否有数据">
                </el-table-column>
                <el-table-column align="center" prop="name" label="更新频率">
                </el-table-column>
                <el-table-column align="center" prop="name" label="数据类型">
                </el-table-column>
                <el-table-column align="center" prop="name" label="共享类型">
                </el-table-column>
                <el-table-column align="center" prop="name" label="数据来源">
                </el-table-column>
                <el-table-column align="center" prop="name" label="业务归口部门">
                </el-table-column>
                <el-table-column align="center" prop="name" label="夏盖单位">
                </el-table-column>
                <el-table-column align="center" prop="name" label="负面清单">
                </el-table-column>
                <el-table-column align="center" prop="name" label="申请数据项">
                </el-table-column>
                <el-table-column align="center" prop="name" label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button size="mini" type="text">详情</el-button>
                            <el-button size="mini" type="text">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <div class="dataAssetDetaol-title">分区字段信息</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
                    <el-form-item label="是否本部门数据:" prop="name">
                        <el-radio-group v-model="ruleForm.resource" @change="handleCurrentChange">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="数据有效时间:" prop="region">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" v-model="ruleForm.date1" style="width: 40vw"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="附件:" prop="region">
                        <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success"
                                @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="脱敏要求:">
                        <el-input style="width: 40vw" type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="使用用途:">
                        <el-input style="width: 40vw" type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <div class="dataAssetDetaol-title">需求填写</div>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="需求名称:">
                                <el-input v-model="ruleForm.desc"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="紧急程度:">
                                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="dataAssetDetaol-title">审批信息</div>
                <div class="apply-process">
                    <img v-if="ruleForm.resource == 1" src="../assets/images/l1.png" alt="">
                    <img v-else src="../assets/images/l2.png" alt="">
                </div>
                <div class="flex flex-center flex-justify-center" style="padding: 40px 0;">
                    <el-button>取消</el-button>
                    <el-button type="primary">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: 1,
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        handleCurrentChange(e) {
            console.log(e);
        }
    }
}

</script>
<style lang="less" scoped>
.dataApply {
    background: #fff;
}

.dataAssetDetaol-title {
    font-size: 18px;
    color: #000;
    position: relative;
    font-weight: 700;
    padding-left: 15px;
    margin: 20px 0;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #006569;
    }
}

.apply-process {
    padding-left: 100px;

    img {
        width: 120px;
    }
}
</style>